【设计规范】Apple TV 人机界面指南

实际尺寸： 608px by 608px

安全区域尺寸：570px by 570px

非聚焦态尺寸：500px by 500px

聚焦态尺寸：570px by 570px

HDTV (16:9)

实际尺寸：908px by 512px

安全区域尺寸：852px by 479px

非聚焦态尺寸：782px by 440px

聚焦态尺寸：852px by 479px

注意，当多种图片尺寸混合时，可能会发生额外的缩放。如果你的顶部图区含有多种图片尺寸，图片会自动放大去匹配最高图片的高度。例如，当和海报、方图混合在一排中时， HDTV图片会放大到500px高。

滚动横幅区 Scrolling Inset Banner

这一布局样式展示一系列几乎整屏宽的大图。在限定的时间内，Apple TV自动从左到右滚动横幅直到其中某个被选中。滚动到最后一张图片后，序列回到开始。

当一个横幅被选中时，在遥控器触控板上轻轻画圈会触发系统聚焦效果：横幅动起来、打光、产生3D效果（如果横幅由多个图层构成的话）。在触控板上滚动，按次序进入下一个或者上一个横幅。使用这种设计展示丰富、引人注目的内容，比如受欢迎的新电影。

提供合理数量的内容确保滚动舒适。滚动横幅区中至少要有3张图片；超过8张的话很难手动导航到某张特定图片。

如果你需要文字，将它加入到你的图片中。这种布局样式在内容下面不显示标签，因此任何文本必须是图像自身的一部分。在分层图片中，应考虑把文字放在最顶层突出出来。

滚动横幅区支持以下尺寸的图片：

超宽比例

实际尺寸：1940px by 624px

安全区域尺寸：1740px by 620px

非聚焦态尺寸：1740px by 560px

聚焦态尺寸：1740px by 620px

4.4 游戏中心图片

如果你的应用是一款游戏，游戏中心会给你更多让用户沉浸在抢眼图像中的机会。

成就图标

每个成就都需要一张不透明的图标，来直观地表现用户在游戏中达成的成就。系统会自动把成就图标裁切成圆形，所以你需要确保核心内容在图片正中。成就图标是用来展示的，没法被选中。

可见尺寸：200px by 200px

实际尺寸：320px by 320px

控制面板 (Dashboard) 插图

这种可选图像出现在你游戏控制面板的顶部。透明度可能被用于让背景从图像中显示出来。控制面板插图不能被选中。

最大尺寸：923px by 150px

排行榜插图

你必须为游戏中的排行榜或排行榜集合提供1-3张单层或多层、长宽比为16：9的图像。插图的底层必须是不透明的。在运行时，深色渐变可能会从下往上覆盖图片，你可以在图片右下角放置文本。这些图像可被选中，在遥控器触控板上轻轻画圈会触发聚焦效果。

实际插图尺寸：659px by 371px

安全区域尺寸：618px by 348px

未聚焦尺寸：548px by 309px

聚焦尺寸：618px by 348px

如需在应用中实现对游戏中心的支持，参见 游戏中心编程指南 。

4.5 图像分层

图像分层是Apple TV用户体验中的精髓。结合视差效果一起，能够产生真实、有活力的体验，并且能随着用户与屏幕上内容的交互唤起实体联系感。

一张分层图片由2-5个不同图层叠加而成。通过分离图层和使用透明度来创造景深的感觉。当用户与图片互动时，靠前的图层升起并变大，同时靠后的图层进一步后退，产生3D效果。

重要：应用图标要求使用分层图片。应用中其他可被选中的图像，包括顶部图区图片，并非必需使用分层图片，但我们强烈建议使用。

使用标准的界面元素来显示分层图像。如果应用的用户界面使用UIKit框架和focus API，当分层图像被选中聚焦时，会自动被处理成带有视差效果的。

合理地区分前景、中景、背景元素。在前景层展现重要突出的元素，比如游戏中的角色、专辑封面或电影海报中的文字。中景层尤其适合展现次要内容和效果，比如阴影。背景层是不透明的幕布，能够衬出上面的图层、但又不抢风头。

通常，把文字放在前景层。把文字放在最上层以便清晰展现，除非你需要文字是模糊的。

背景层是不透明的。使用不同级别的透明度并让靠下层的内容透出来没问题，但背景层必须是不透明的，否则你会得到错误提示。不透明的背景会确保你的设计在视差效果下、投阴影时、在系统背景上使用时都看起来很好。

保持简单精致的分层。视差被设计成几乎注意不到的效果，过度的3D效果看上去不真实、不和谐。保持图像景深的简洁，让你的设计充满生命力和惊喜。

在核心内容周围预留安全区域。选中时和视差效果中，靠近边缘的图层内容会被裁切或在图像缩放移动时难以看清。为了确保核心内容总是可见的，不要把它摆放的太靠近边缘。安全区域的大小随图片尺寸、图层前后顺序和移动动作变化。前景层会比背景层裁切得更厉害。

总是预览你的分层图像。设计在Apple TV上看起来很棒的分层图像，你需要在设计过程中通过Xcode预览。重点关注缩放和裁切，如果需要的话调整图像直到重要的内容总在可视范围内。分层图像成稿后，你还需要在Apple TV上预览用户实际会见到的效果。

分层图像的大小

在确定分层图像合适的尺寸时，同时需要考虑选中态和非选中态。在视差效果中，背景图层可能会被少量裁切，所以把核心内容设计在安全区域以内，并在区域内适当留白，以确保你的设计在各种情况下都看起来很好。

推荐使用以下公式来计算分层图像的大小，这一算法根据图像非选中态的尺寸来计算。

选中态尺寸	实际尺寸	安全区域尺寸
长边：长边非选中态尺寸 + 70px短边：基于长边等比例缩放	长边：长边选中态尺寸 x 106%短边：基于长边等比例缩放	与选中态尺寸相同

创建分层图像

Apple TV使用CAR和LCR文件加载分层图像。

CAR文件

CAR是苹果定义的一种专有的资源目录运行时文件格式。你并不直接创建CAR文件，Xcode会在编译项目的LSR文件和图像栈时自动为你建立。

• LSR图像。LSR是苹果定义的一种专有的分层文件格式。除了在应用当中使用，LSR文件还可以被导入iTunes Connect用作媒体图像，比如电影电视剧海报。Parallax Previewer工具和Parallax Exporter Photoshop插件能让你预览并以LSR格式导出分层图像。在 参考资料   可以下载这些工具。
• 图像栈。任何标准PNG文件都可以导入并作为图像栈中的独立图层。与所有分层图像一样，图像栈不超过5层。Xcode还可以把图像栈导出成LSR文件。

LCR文件

LCR是苹果定义的一种专有的运行时分层文件格式，并在内容服务器上使用。如果你的应用运行时需要从服务器获取分层图片，就必须要用LCR格式提供这些图片。LCR图像不应该嵌入在应用本地。

你并不直接创建LCR文件，而是使用Xcode中的layerutil命令行工具，通过LSR文件或Photoshop文件建立。

如果需要在Xcode应用项目中运用分层图像的指南，请查看 tvOS应用编程指南 。

4.6 启动图像

启动图像在应用启动时展现，即时出现并很快被应用的首屏替代，让用户感觉应用响应速度很快。启动图像并不是艺术表达的窗口，它唯一的意图是增强这样的用户认知：你的应用启动很快，立即就可以使用。启动图像是静态图、不分层。

重要： 每个应用必须提供启动图。

尺寸： 1920px by 1080px

把启动图设计成与应用首屏几乎一样。如果启动图中含有不同的元素，当启动完成时，用户能够感知到从启动图切换到应用首屏的闪动。

在启动图中避免避免使用文字。因为启动图是静态图，所以任何文字展现不会经过本地适配。

淡化启动效果。用户可能会频繁切换应用，所以设计引导图时请不要意图引起用户对启动过程的关注。

别做广告。启动图并不是做品牌宣传的机会。不要设计得像闪屏或“关于”窗口，也不要使用LOGO或其他品牌元素，除非它们本来就是应用首屏的一部分。

5视觉设计

Apple TV充满了一些设计独到并且兼顾体验的应用。以下这些原则可以帮助你设计出可以向用户传达品牌理念的应用。

5.1 动效

Apple TV通过UIKit的方式，内置了很多适用于获得焦点、选择、和转场的动画，你可以在自己的应用中利用他们。这些微妙的动画为用户和屏幕内容建立了视觉感受上的联系。内置的动画效果与有品位的自定义动画的结合使用，可以增强内容的沉浸式体验。

避免使用无意义的动画。屏幕上的动画应该只是用于响应用户的操作。非用户行为触发的动画会造成体验的中断和注意力的分散，不要仅仅是为了使用动画而使用动画。

避免过分夸张的动画。多余的跳动或弹簧效果也许让动画在电脑频幕上看起来非常棒，但是呈现在更大的屏幕上的时候，会是非常让人恼火的。考虑下用优雅温和的动画来替代吧。请务必经常测试你的设计，以确保在电视上看起来也棒棒哒。

追求真实可信的动画。Apple TV的设计理念是轻量化，关键的界面组件都在体现轻薄的质感。这些轻量化的组件动起来不应该表现的像有质量似的，比如可以反弹到某个地方或者是从某个地方冒出来。虽然用户乐于接受艺术化的处理，但不合理的或是违背物理定律的运动效果，会让人感到迷惑。

5.2 品牌传达

成功的品牌传达不仅是将品牌元素添加到应用中这么简单。成功的应用需要通过明智的选择字体、色彩、配图，来传达品牌独一无二的理念。在应用中应当适度的向用户提供品牌内容，但不要过量。

优雅并潜移默化的传达品牌。用户使用应用是有目标的，为了得到讯息或是处理事务，而不是为了看广告。在应用的设计中向用户柔和的提示品牌信息，才能达到最好的使用体验。比如，在应用的界面中使用和应用图标一样的的色彩，就是呈现品牌内容的一种好方法。

内容为先，而不是品牌。一条一直存在的顶部栏，除了用来展示品牌什么也做不了，而且还会限制内容的空间。内容为先（的设计方式）则是用一种弱化干扰的方式来呈现品牌。此外还可以考虑去自定义色彩、字体、或者巧妙定义背景。

抵住在应用中到处展现品牌标志的诱惑。除非品牌标志的呈现对使用情景很必要，否则请避免在应用中频繁出现。

5.3 色彩

Apple TV的平台采用轻量简约的设计风格。色彩应当用于让用户更沉浸式的体验，引导用户关注内容，而不是界面本身。当面临决定选用哪种色彩和在哪里使用色彩时，请考虑它是否可以起到增强内容的作用。色彩同样有助于传达品牌，通常，可以使用应用标志的填充色。

在真实的电视上预览色彩。用户在计算机上和电视上看到的色彩并不总是一样的。为了获得最佳的效果，请使用sRGB的色彩格式，并且需要在真实电视上经常测试，可以通过这样的方式熟悉如何选择色彩以及将色彩转投到大屏幕上。如果条件允许，请在多台电视上预览你的应用，因为不同的电视型号可能导致很明显的色彩差异。

柔和的色彩更优。如果你的应用使用自定义色彩模式，请避免使用高饱和度色彩。这些色彩在电视的大屏幕上看上去会非常炫目和喧宾夺主，如果用户调整了他们的显示设置，则更甚。

请考虑色盲以及文化差异对色彩认知的影响。用户看待色彩的方式是不同的。比如有些色盲的人很难区分红色和绿色。所以请避免仅使用红绿色彩差异来区分状态或数值。一些图片编辑工具软件有提供可以验证色盲人群是否可以识别（当前的色彩）的功能。

不仅仅通过色彩来告知焦点状态。在Apple TV上，当元素获得焦点时，微妙的缩放以及响应式的动画是表示可交互的主要手段。

在不同的显示级别上预览色彩。电视的色彩效果取决于不同的生产商，亮度以及显示设置。如果某些设置会导致应用中的内容会混在一起或者变得看不清楚，请考虑重新选择色彩。

5.4 内容

Apple TV提供了一种可以在客厅中和各个年龄段的家人共享的家庭影院式体验。整个平台的页面和内容非常的丰富、美观、简单、可参与，相比科技感它更强调那种人和人联系起来的感觉。

尊重家长的控制。请记住一些家庭会使用家长模式来控制色情和限制级的内容。你的应用应当在适当的时候遵循这些限制。对于实施指南，请参阅IOS应用指南的限制条款相关内容。

5.5 布局

电视有很多不同的尺寸。Apple TV上的应用和在IOS上一样不会自动适应屏幕的大小。相反的，应用在每一个显示器上都会呈现完全一样的界面。设计的时候要格外注意，这样应用才能够在各种尺寸的屏幕上都呈现非常赞的布局。

优化大屏显示效果。

将你的应用的界面分辨率设置为 1920 x 1080 (1080p) 像素，这意味着 16: 9 的界面宽高比。所有得比例都应该是 @1x 分辨率的。

保持主要内容远离屏幕的边缘。

留意距离界面顶部和底部60像素，以及距离侧边90像素的区域。在这个接近边缘的区域内很难看清楚内容。在一些旧的电视中，为了适应界面尺寸也会裁掉边缘的内容。

有焦点状态的元素之间注意保留适当的间距。

如果你使用UIKit或者focus API，元素在获得焦点的时候尺寸会增大。请注意元素在获得焦点时候的视觉样式，确保它们不会无意中遮盖了重要信息。

 

通过显示一部分当前屏外的内容来暗示隐藏了更多的内容。

呈现大量内容时，会遇到单独一屏不能承载全部内容的情况，可以通过展示一部分当前屏以外的内容来暗示还有更多的内容

构建媒体为主的应用时，使用布局模板。

如果你的应用布局需要少量的定制并且内容呈现要精美。请考虑使用预设的布局模板。详见布局模板。

在Apple TV上，网格有助于更好地呈现内容。这些内容不仅在远距离很容易浏览，还可以使用遥控器快捷地导航，呈现效果非常理想。

以下的网格布局和界面宽度提供了最佳视觉体验。请确保元素在非焦点状态保持适当间距，以防止他们在获得焦点的时候内容重叠。

3栏网格

内容宽度：548像素

水平间距：48像素

垂直间距：100像素

5栏网格

内容宽度：308像素

水平间距：50像素

垂直间距：100像素

6栏网格

内容宽度：250像素

水平间距：48像素

垂直间距：100像素

9栏网格

内容宽度：148像素

水平间距：51像素

垂直间距：100像素

如果你使用UIKit提供的内容流的集合样式，网格栏数会根据内容的宽度和间距自动确定。详细的内容请参见 UICollectionViewFlowLayout Class Reference 。

考虑屏幕的安全区域。牢记将内容左右缩进90像素，上下缩进60像素。可以通过在缩进造成的区域中，用溢出的方式展示未在当前屏出现的内容。

为标题行留出额外的垂直间距。如果一行内容有标题，请确定非焦点状态的上一行底部和当前标题行的中间有适当间距。然后，确定该行非焦点状态下标题底部和内容顶部的有适当距离。

请使用一致的间距。不一致的间距会让网格看起来不像网格。

余光的内容保持左右对称。为了可见内容更直观的获得焦点，请保持屏幕安全区域外的溢出内容在各个边缘都保持相同的宽度。

布局模板

Apple TV提供了样式美观、布局一致、并且凸显内容的模板。这些模板是基于JavaScript和Apple TV的编程语言(TVML)开发的。当应用启用时，它们会动态加载内容。这些模板可以灵活创建丰富的内容，并且这些内容可以很好地在电视屏幕上呈现，非常适合流媒体。

有品位的自定义模板。布局模板的可定制程度很高，你可以控制背景、文字、色彩、尺寸、布局甚至更多。在设计应用的时候，请无论何时都遵从于内容，避免出现分散注意的、跳跃的或突兀的定制内容。

在使用之前了解模板的使用意图。如果你的定制化使得基本模板无法识别，请考虑换个模板或者使用完全自定义的界面。

更多应用中模板整合方面的内容详见 Apple TV Markup Language Reference 。

提醒模板 Alert Template

提醒模板用于在屏幕上呈现相关信息并询问是否执行操作，比如确定购买或删除等负向操作。

另请参阅 6 界面元素 中的 6.9 提醒。

目录模板 Catalog Template

目录模板用于呈现内容相关的组内容，比如电影或电视节目的流派的分组。浏览左边的分组列表，聚焦于其中一项的时候右侧可以看到对应的内容。

专辑模板 Compilation Template

专辑模板用于呈现元素包含的内容，比如专辑中的歌曲或者播放列表的轨迹。它最常用于显示音频相关的内容。

描述性提示模板 Descriptive Alert Template

描述性提示模板用于显示大段的长内容，可能要求用户同意某一项操作，比如同意条款或者许可协议。

保持简短，避免滚动。 远 距离在屏幕上阅读大量文字一点都不好玩，对眼睛简直是折磨。所以请认真斟酌应用需要呈现的文字内容。

显示，而不是讲述。 如果可能，避免描述提示内容，可以考虑用更容易理解的方式来展现相同的信息，比如用图片。

按键要仔细摆放。 当文字内容可滚动展示时候，请横向并排摆放按键。这样一来，可以通过上下滚动来阅读文字，通过左右滚动来切换按钮的焦点状态。

另请参阅 6 界面元素 中的 6.9 提醒。

表单模板 Form Template

表单模板用于显示一个或者多个输入框比如名字和邮件地址，包括键盘。

另请参见 6 界面元素中 的 6.3 文本和搜索。

列表模板 List Template

列表模板用于以列表的形式在屏幕右方呈现电影或电视的节目列表。当聚焦与一项内容时，左边会呈现其对应的内容，比如它的图片或者描述。

加载模板 Loading Template

当内容在服务器中检索的时候，会出现加载模板，它会时时显示一个进度显示器和一些文字描述。它让用户知道有一些行为正在进行，应用看上去并没有终止。

保持加载文案的简练和准确。 如果加载很快，用户也许来不及在文案消失前读完很长的内容，这会让他们以为遗漏了一些信息。

另请参阅 6 界面元素 的 6.7 进度指示器。

主菜单模板 Main Menu Template

主菜单模板会展示一个带底部菜单的全屏图像。它通常出现在电影的首页，有一个可以播放电影和访问特定章节或其它功能的菜单。

菜单栏模板 Menu Bar Template

菜单栏模板是为了一级页面而设计，作为内容的入门页。它包含一个贯穿顶部的菜单。当一个元素获得焦点时，它相关的内容会在下方呈现。

保持菜单栏的整洁。 每增加一个元素都会导致更多的选择，并且还增加了应用的复杂度。

将菜单元素保持在屏幕上。 当菜单栏获得焦点的时候，它所有的元素都应当可见。一般情况下，短标签应当限制在7个以内，这样能避免由于内容拥挤导致的元素超出当前屏。

另请参见 6 界面元素 的 6.1 标签栏。

展览式模板 Parade Template

展览式模板通过将当前焦点状态下的组内容，通过旋转的方式进行预览。组内容列表会呈现在右边。聚焦与其中的一项内容，左侧用旋转的方式呈现其内容。

产品模板 Product Template

产品模板用于电影、电视或其他产品的展示。它通常包括产品图片、背景和描述信息。在产品内容下方会提供产品的相关信息，用户可以通过向下滚动来获取更多信息，比如演员列表，打分和评论。

自定义背景时，请仔细考虑图片和文字信息的颜色。 默 认情况下，背景会呈现出一个产品图片的投影，来制造互补的视觉效果。如果你决定使用自定义背景，请确保他不会与其它内容造成冲突。

 

产品集合模板 Product Bundle Template

产品集合模板用于呈现系列电视节目，电影和其他产品。通常情况下它包括图片，背景和描述信息。内容下方提供了包内的全部产品，比如一季的电视剧。用户可以通过向下滚动的方式获取更多的信息，比如演员列表，打分和评论。

评分模板 Rating Template

评分模板用于让用户对特定元素进行评价，比如电影或一首歌。

搜索模板 Search Template

搜索模板用于让用户搜索应用中的内容和查看搜索结果。它包括搜索框，键盘和结果列表。

 

堆栈模板 Stack Template

堆栈模板用于成组的展示产品，比如不同流派的电影。每组产品都直接在前一组的下方展示。

5.6 质感纹理

在整个系统中，柔软细腻，半透明质感的窗口的呈现，是为了传达一种深度和层次感。这些设计同样也给人沉浸感，但并不引人注意，也不会造成内容的分心。这些质感纹理有多种色彩，适用在多种场景中，看上去非常棒。

考虑使用系统的质感。 系统质感能带给你原生应用的感觉，当用户从其它应用切换到你的应用的时候，过渡会非常平滑。下面的质感样式可供选择：

UIBlurEffectStyleExtraLight

大部分全屏模式中会使用这种纹理，效果非常棒。如果你的应用采用透明窗口的背景，系统会默认自动呈现此样式。

UIBlurEffectStyleLight

这种纹理适用于覆盖层，它会模糊屏幕上的部分内容。

使用更轻薄，半透明的质感来提升内容，让它有新鲜感。 深色的质感会导致沉重的感觉，这样的质感使内容显得陈旧，与背景混为一体且看不到投影，从而降低了页面纵深感和活力。当你看不到投影的时候，很难区分哪个元素处于获得焦点的状态。

5.7 字体排版

San Francisco是Apple TV的系统字体。这个字体有两个变体：San Francisco Text 和 San Francisco Display，在大屏幕上易读性都很高。

在标签或其他界面元素中使用系统字体时，Apple TV会根据选择的磅值自动应用最合适的文本样式。它也会按需自动更改字体并遵循辅助设置。

尽可能减少应用中的文字数量。展示给用户，而不是通过文字来说明。阅读房间对面屏幕上的大量文字十分费劲也并不好玩。认真考虑你的应用实际需要展示的文本数量，尝试用更容易理解的方式来呈现信息，比如使用图片或动画。

在设计时选择合适的系统字体。最重要的是，文字在远处必须清晰易读。当设计应用时，39点或更小的字适合用San Francisco Text，40点或更大的字用San Francisco Display更好些。

尽量使用内置的文本样式。内置的文本样式允许你用不同的视觉效果来表达内容，同时保留最优易读性。这些样式使用系统字体并且允许你利用重要的排版功能，比如动态排版（为不同字号自动调整字距和行距）。主要内容使用正文样式，标签和次要内容可以使用注脚样式和说明样式。

使用自定义字体时，在远处需要清晰易读。Apple TV支持自定义字体，但在远处可能难以阅读，尤其当字体笔画过细时。所以，除非你有必须使用自定义字体的理由，比如为了品牌推广或创造沉浸式的游戏体验，否则还是坚持用系统字体吧。

使用自定义字体时，支持辅助特性。系统字体自动会对辅助特性作出反应，比如字体加粗。使用自定义字体的应用，应该检查是否启用了辅助特性并在特性发生变化时接收通知，实现与系统字体相同的行为。

请在 参考资料 下载San Francisco字体。

5.8 视频

Apple TV的视频播放器让用户能在应用内欣赏视频，而且它专为触屏设计。与Siri遥控器的无缝集成让用户能够流畅、直觉地使用手势来浏览多媒体。

用户可以使用遥控器做这些事：

• 快速翻看视频：拇指在触控板上滑动。
• 视频的快进和快退：点击触控板的左侧或右侧。
• 视频节点上快进和快退：点击唤起视频播放进度条，然后点击触控板的左侧或右侧。
• 连续快进或后退：点击并按住触控板的左侧或右侧。
• 展现额外信息：向下滑动，能够展现字幕、小节、音轨、扬声器输出选项。

使用系统视频播放器。内置的视频播放器能够提供很棒的视频播放体验。它的控件极简而低调，让媒体本身成为注意力的中心。除非你的应用确实需要一个自定义播放器，否则请使用系统视频播放器，会创造跨平台统一的多媒体浏览体验。

在视频上展现LOGO或非交互的浮层时，内容为先。一个小小的不引人注目的LOGO或倒计时可能适合放在视频上，避免使用与观看体验无关的又大又让人分心的浮层。用户期望在观看内容时不受打扰，他们会欣赏干净整洁的观看体验。

优雅地在视频顶部显示互动元素。一些视频中会展现可交互浮层，比如小测试、调研、进度签到等。为了体验更佳，暂停播放中的视屏，需要精确到仅有0.5秒的延迟，然后展现可交互浮层。提供清晰的关闭浮层的方式，一旦用户完成交互就恢复视频播放。

提供额外的增值信息。通过提供图片，标题，描述和其它有用的信息，来实现视频附加信息的定制化。一般来说，这些内容的高度应当限制在8行以内，以免影响到视频播放。

6 界面元素

界面元素是构成应用的基石。用界面元素来展示信息、促进与应用内容的互动。

6.1 标签栏 Tab Bars

对于Apple TV的多数应用而言，导航主要以屏幕顶部的标签栏形式呈现。内容区域位于标签栏之下，显示当前选中标签的内容。标签栏让用户知道当前处于应用哪个位置；同时提供一种便捷路径，让用户在不同页面和内容之间移动，或者触发操作行为，如搜索。

当遥控聚焦标签栏时，标签栏出现在屏幕顶部，高度是140px。标签栏默认半透明，可以看到标签栏覆盖区域下的内容。 一般而言，标签栏总是位 于屏幕顶部，移开聚焦的标签栏时，标签栏消失，屏幕展现完整内容。

 

使用标签栏，有逻辑的来组织应用内容。标签栏可以很好地扁平化信息层级，快速访问同级信息模块。一些特殊信息不够明确时，采用角标补充说明。与当前视图或模式相关联的新信息或重要信息，需要解释说明时，通常在某个选项上使用以下角标 –  一个包含白色数字或解释说明文字的红色椭圆角标。

对角标进行管理。一个页面不要试图展示大量的新信息或重要信息，这样会让用户无所适从。

对选项数量进行管理。每增加一个选项，既增加应用本身的复杂性、又增大用户选择认知困难。

当聚焦标签栏时，所有的选项都应该要在屏幕内。选项应该使用短标题，从而避免拥挤或者导致有选项超出屏幕显示范围。

保证所有选项都可访问。如果一个选项可见、可用，而其他选项不可见、不可用，那么应用界面状况将不可控。

保证所有选项位于屏幕上，且随时可用。当选项下没有内容展现时，给出相关说明。例如，iTunes的音乐选项下，当没有歌曲列表时，给出了如何下载音乐的引导说明。

标签栏适配应用风格 。采用颜色提取，或调整透明度，来适配应用的配色方案和风格。

更多的实施细则，请查看 UITabBarController Class Reference 和    View Controller Programming Guide for iOS 。

标签栏选项 Tab Bar Items

选项标题通常使用文字。一般而言，相比于易被曲解的图标，简明的书面文字更干净、更直接。

采用短的、有意义的名词或动词作为选项标题。标题清晰定义了当前选项内容类型。一般而言，标题应该是名词（如音乐、电影和流派），但某些情况下，动词可能更加合适（如播放和搜索）。

6.2 表单和内容集 Tables and Collections

Apple TV包含了一些关于组织和呈现内容集合的标准，帮助用户理解以及导航。

表单 Tables

单列表单以滚动形式来呈现数据，可以将它们划分成多个区域或组别。不同量级的信息，使用表单的形式来更清晰有效地展现。

一般来说，单列表单是一个很好的承载文字信息的载体，而且经常以导航形式出现在页面一边，同时页面另一边呈现相关联的内容。更多可查看 分屏视图。

考虑单列表单宽度。窄的列表导致列表标题截断和重叠，让用户很难阅读和快速浏览。同样地，宽的列表也很难阅读和浏览，且占据了内容区域空间。

页面内容采用优先加载模式。 不要等待全部内容读取完成后一起加载，而应先加载一部分。优先先加载文字部分，待图片数据读取完毕后，再加载图片内容。这种技术让用户尽可能快的获取有用信息，同时提升应用的用户感知反应。某些情况下，页面没有刷新时，显示旧数据可能是有意义的。

内容加载状态。 如果一个列表内容加载时间较长，需要一个加载进度条或动态的指示图标来告知用户应用仍在加载中。

更多的实施细则，请查看 UITableViewController Class Reference 。

单列表单 Table Celss

你可以采用标准的单列表单样式，定义表单中内容如何出现。

默认样式。单列表单的左侧为“可选图像+左对齐标题”。对于不需要补充信息的内容来讲，这是一个很好的选择。 更多的实施细则，请查看  UITableViewCellStyleDefault 。

小标题模式。 内容左对齐，大标题在上，小标题在下。采用小标题模式可以很好分行。 更多的实施细则，请查看  UITableViewCellStyleSubtitle 。

补充说明1. 单列表单中，标题左对齐，小标题右对齐，且小标题采用更小的字号。 更多的实施细则，请查看  UITableViewCellStyleValue1 。

补充说明2. 单列表单中，标题右对齐，小标题左对齐，且小标题采用更小的字号。更多的实施细则，请查看  UITableViewCellStyleValue2 。

标准的单列表单样式也允许存在图形元素，如复选标签或标记。当然，增加这些图形元素，会减少列表标题和小标题的显示空间。

保持标题文字简洁性，避免被截断。被截断的词句很难被理解。标准单列表单样式中，标题文字是被自动截断的。而由于文字截断产生问题的多少，取决于采用哪种单列表单样式和定义截断何时发生（给出最大文字字符数，超出截断）。

测试选中态。选中表单内某行内容时，该行内容放大高亮。同时选中态样式包含圆角，这直接影响到该行中图形样式。基于此，如需使用图形元素，可直接采用表单圆角样式，而不增加额外的圆角。

考虑是否增加表单编辑功能。在Apple TV 上进行删除和重新排序操作，是一个缓慢而乏味的过程。因此需要考虑是否值得提供此类功能。

为用户定制个性化表单。用标准单列表单样式，满足绝大多数用户和使用场景，但是你的内容可能需要满足更多操作。这种情况下，相比于调整标准样式，为用户特别需求定制表单是一个更好的选择。 了解如何创建个性化表单，参考 Table View Programming Guide for iOS 中的  Customizing Cells 。

更多的实施细则，请查看  UITableViewCell Class Reference 。

内容集 Collections

内容集有序的管理一组内容，并在一个可自定义、高度可视化的页面中呈现。内容集不强制要求呈现线性格式，因此特别适合显示大小不同的内容。一般而言，内容集适合呈现图片相关内容。

当标准样式或网格布局足够满足需求时，避免进行全新设计。一个内容集应该提升用户体验，而非变成视觉焦点。

更容易的聚焦选项。在用户找到感兴趣的内容前，如果很难找到想找的内容选项，他将感到沮丧和丧失兴趣。 给图片周围足够留白，以保持内容清晰聚焦，同时避免内容重叠。

考虑使用表单组织文字，代替文字堆叠。在电视屏幕上，滚动列表中的文字信息，通常更简单和更易理解。

如果应用内容丰富，需要一个标准的网格布局呈现内容集，请考虑使用模板。详见  Templates 和    Apple TV Markup Language Reference 。 更多实施细则，请查看 UICollectionViewController Class Reference 。

分屏视图 Split Views

分屏视图决定相邻2个内容面板的呈现样式。每个内容面板都可包含多种元素，如列表、内容集、图像和自定义视图。分屏视图中，一级面板显示固定的、可聚焦的内容；二级面板显示与之相关联的信息。分屏视图经常伴随着可筛选内容使用，一级面板中显示可筛选类别列表，二级面板中展示选中类别的具体内容。

根据内容选择效果最好的分屏视图。默认情况下，分屏视图以1:3的比例分隔屏幕空间，一级面板占据屏幕的1/3，二级面板占据2/3。当然屏幕也可按照1:1的比例分隔。基于内容本身，选择适当的分隔比例，以确保面板看上去均衡。

高亮一级面板中选中项。二级面板中内容是可变的，总是对应一级面板中选中项。这有助于用户理解面板之间关系。

每个分屏视图显示单独标题。 对于屏幕中多个标题，用户很难找出当前内容。相反，显示单独标题，提供了一个视图对应关系框架。

当二级视图显示了一个内容集合，考虑使用一个聚焦的标题。当二级视图包含了重要内容， 考虑在一级视图上显示标题，这样就有更多的空间用来显示内容。

更多实施细则，请查看  UISplitViewController Class Reference 。

6.3 文本和搜索 Text and Search

如果必要，你的应用可以申请基于文本信息来执行搜索、登录服务等等。需要留意的是，除非物理键盘连接，在Apple TV上的文本输入任务的体验可能较为乏味。

文本框 Text Field

输入区域是一个固定高度、带有圆角的单行文本框，在用户点击输入区域的时候可以自动调起一个键盘屏幕。通过使用输入框获取少量信息，例如电子邮件地址。

在应用中最小化文字输入。键入长段文本内容或是填写大量文字在Apple TV上是极为耗时的。减少输入并且考虑有效的收集展示信息，比如说带有按钮的形式。

文本框中的提示信息增强用户理解。当输入框内没有键入其他文字内容的时候，一个文本框可以展示占位文本 – 例如邮件地址或是密码。当占位提示文本内容足够清晰时，不要使用单独的标签来描述文本字段。

在条件允许的情况下，使用安全输入框。当你的应用需要获取一些敏感信息的时候，例如密码输入，尽量使用安全输入。

更多实施细节，请参见  UITextField Class Reference 。

键盘 Keyboards

任何时候点击文本框都会自动弹起一个输入面板。屏幕风格由当时使用的输入设备决定。

线性面板。当用户使用Siri遥控器的触摸板时，线性的键盘会展现在屏幕上。这种风格优化了触控体验，使用户更快速更流畅的输入文字。

网格面板。当用户使用Siri遥控器以外的设备时，网格状的键盘会展现在屏幕上。内容布局会基于键盘类型自适应。

虽然你不能控制键盘屏幕风格，但是你可以指定键盘类型。

根据选择的内容，制定相应的输入面板类型。为特定类型的内容，Apple TV提供几种不同类型的键盘设计，使输入更加便利。相对应的键盘让输入过程更轻松，比如输入名字，邮箱地址或是数字。有关可用键盘类型的列表，请参 阅 UITextInputTraits Protocol Reference 的 UIKeyboardType 。 要了解你的应用内的键盘管理，请参考 Text Programming Guide for iOS 的 Managing the Keyboard 。

在适当的时候选择使用附属视图。键盘屏幕包含一个可选的附属视图。使用此区域提供有关您所收集的数据上下文和其他信息。例如，您可以添加您的应用程序标识和标签到附属视图，告知用户“请输入您的电子邮件地址登录到您的MyApp的帐户”。更多实施细节，请参阅 Text Programming Guide for iOS 的 Custom Views for Data Input 。

搜索 Search

搜索屏幕是一个专用键盘屏幕，用来执行搜索输入操作。在此屏幕上，搜索结果将以可定制视图形式，显示在键盘下呈现。

允许用户使用近期搜索记录。用户经常在Apple TV上搜索重复内容。在用户开始输入前，通过在键盘下方罗列出流行或近期搜索结果，减少重复输入。

简化搜索结果。不提供需要大量滚动查看的冗长搜索结果列表。使信息易于获取，例如，将搜索结果分为多列，或呈现最匹配的搜索结果信息集合。

考虑让用户手动过滤搜索结果。如果可以，在搜索结果区域设置一个筛选区，以帮助人们方便快捷的过滤搜索结果。

更多实施细节，请参见  UISearchController Class Reference 。

6.4 按钮 Buttons

应用特定的启动按钮可以包含一个标题和图标。

一般情况下，使用标题名称或图标来传达按钮的语义。由于按钮空间有限，为了避免拥挤和视觉复杂性，尽量不合并文本和图标。

明确标签和破坏性操作。如果点击一个按钮操作，导致不可逆转的结果，如删除内容，请确保这个按钮的指示性是非常明确的。使用明确描述的标签，如“删除”或相应的图标。在执行破坏性操作之前显示一个警告要求确认，也是很好的做法。

不要使用后退按钮。用户习惯于通过点击遥控器上的菜单按键带他们返回上一级界面或回到主菜单。除非你的应用有正当的理由去使用额外的后退按钮，尽量不要在你的页面上加入返回按钮。

对于实施细节，参见 UIButton Class Reference 。

按钮图标 Button Icons

使用简单、可识别图形作为按钮图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解，例如放大镜图标代表执行搜索。

按钮文字 Button Text

如果合适的话，在图标下方显示描述性文本。一个图标通常足够表达含义。但如果附加的文字描述提供了有用的信息内容，则把它放在按钮下方。

使用动词或动词短语来描述一个按钮的操作。以操作行为为特定标题，表示交互性，并且明确了单击该按钮时会发生什么。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保按钮文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.5 导航栏 Navigation Bars

你可以在视窗的顶部增加一个导航栏，用来展示标题、导航按钮、以及其他交互元 素。应用设置使用一个导航栏， 导航栏的标题用来提供内容信息，让用户随时知道处于应用的哪个位置。

请注意透明度。导航栏默认就是透明的，所以所有在导航栏下面滚动的内容都是清晰可见的。确保导航栏里的交互元素不要与底下内容元素有所冲突。当内容滚动时，考虑把导航栏下的内容元素淡化，从视觉上将它们与导航栏上的元素区分开。

6.6 页面控制器 Page Controls

有些应用会把内容分散到多个页面上呈现，一个页面控制器可以清楚地告诉用户总共的页面数量，以及现在处于哪个页面。它的呈现方式就是有一连串小的空心的指示原点，可以从左边滑动到右边，同时呈现出页面数量及顺序。一个实心原点指示的是当前页面。视觉上来说，这些小点的间隔是相同的，如果点数太多的话，屏幕上会省略掉一部分。

页面控制器它本身是一个非交互的元素，只是作为信息呈现的功能使用。它并不真正的具有导航的作用－比如说，你不能点击一个小点去到一个特定的页面。相对应的，真正的页面之间的导航会使用其他的交互机制，比如说手势控制以及分离按钮的按压／点击。

请在完整的屏幕页面上使用页面控制器。当全屏页面的内容很多且是同级情况下，使用页面控制器。在页面间切换时，尽量避免使用额外的交互方式，保持用户注意力集中。

不要展示太多的页面。超过10个小点，用户很难让一眼就数过来；然后超过大约20页的话，用户查看起来就会非常耗时。如果你的应用需要展示超过20个同级页面时，请考虑使用不同的设计方式，比如网格，因为网格不需要按照既定顺序来导航。

更多的实施细则，请查看  UIPageControl Class Reference 。

6.7 进度指示器 Progress Indicators

不要让用户坐在那死盯着一个静止的屏幕，等待应用加载内容或者呈现冗长的数据处理操作过程。利用动态的指示图标还有进度指示条来让用户知道应用正在加载中，同时告诉他们还要等多久。

动态的指示图标 Activity Indicators

一个动态的旋转指示图标用来表示比较难测量时间的任务的加载，比如说正在加载或者同步复杂的数据。当任务完成时，这个图标就会消失。

相比于动态指示图标，多使用进度指示条。如果任务是可以被计算测量时间的，请不要使用指示图标（就是那个旋转的小圈圈），请使用进度指示条，这样用户就能更好的评估正在发生什么，还需要等待多少时间。

保证指示图标是动态显示的。用户会自然而然地将静止的活动图标（也就是本应该活动的东西）当作是死机的迹象，所以让那个小圈圈一直转着可以让他们知道应用正在运作。

在用户等待加载的时候，可以给他们提供一些有用的信息。这些有用的信息可以是在动态指示图标上增加的文字信息。不要增加意思模糊的术语，比如说正在加载或者正在授权这样的字眼，因为它们并不会更好地帮助用户理解。

想看更多的细节信息，可以参考 UIActivityIndicatorView Class Reference 。

进度指示条 Progress Bars

进度指示条是用来显示可测量任务的加载进度的，表现为一条从左到右填充的轨迹。

精准告知用户任务的加载进度。不要为了让应用看起来很忙，而显示不精准的进度信息。如果任务是可被测量时间的，使用进度指示条，否则使用动态指示图标。

进度指示条适用于可测量时间的任务。进度指示条有益于显示任务状态，尤其是它能告知用户完成当前任务，还需多长时间。

更多实施细则，请查看 UIProgressView Class Reference 。

6.8 分段控件 Segmented Controls

分段控件是指一串线性排布的控件，每个控件都作为一个按钮来呈现不同的视图。分段控件包含两个或两个以上、统一比例的控件，单个控件包含了标题或图标。利用一个分段控件来提供功能联系非常紧密，但是又互不兼容的一些功能，比如说播放列表和唱片集。

不要把其他很容易被用户注意到的元素放在分段控件旁边。只要聚焦到这些控件上，就会被选中，所以要十分注意它与其他交互元素位置摆放，尤其是当这个分段控件与页面的其他交互元素是相关联的。如果其他容易被注意到的元素和分段控件太近，用户在切换不同控件时，可能会容易引起误操作。

考虑在屏幕上，将内容以控件形式分割成多个模块，帮助用户进行信息过滤。在分离模块环境下，用户操作导航定位和内容筛选时，会来得更加轻松。一个控件操作的难易程度，取决于该控件的放置位置。

控制好控件数量。超过7个控件就会使用户很难一眼分辨出来，而且在定位时也会变得非常费时。另外，尽量保证各个控件的大小与它所包含的内容匹配。因为所有的的控件是相同的宽度，如果一些控件里有内容，一些控件里没什么内容，这样看起来就不是很舒服。

避免把文本和图标混在一起。单独的控件可以包含文字标题或者图标，但是不要同时涵盖。最好避免在一些控件里使用文字标题，然后在其他控件里使用图标。否则，你的应用界面内容看起来就会非常多且琐碎。

如果要个性化定制控件的话，要更注重内容元素的排布，要保证内容排布看起来是合理的，尤其是居中的时候。

更多的实施细则，请查看 UISegmentedControl Class Reference 。

控件图标 Segment Icons

利用简单、可识别的图形来来作为控件图标。在电视屏幕上，太多细节的图标很难解释。保持图标简洁更好的传达信息。有可能的话，使用通用图标帮助理解。

控件文本 Segment Text

使用短的，具有含义的名词作为控件标题。一个控件的标题清楚地传达出当控件被选中后，它所呈现的内容类型。一般来说，标题应该使用名词。

使用大写式标题。除了文章以外，大写按钮上的每一个字，并列连词，和四个字母以下的介词。

确保文本简短，重点突出。过长的文字可能被截断，从而使其难以阅读。

6.9 提醒 Alerts

与应用或设备所处的状态相关的重要信息，且需要用户反馈时，弹出全屏提醒弹窗。提醒弹窗包含一个标题、一个或多个按钮、以及可以附加文字说明。除了上述的内容元素，提醒弹窗的样式应该是静止的，且与系统统一。

尽量减少提醒弹窗的使用。提醒弹窗会阻断用户体验，除非在非常重要紧急的情况下使用，比如执行毁灭性操作（删除等）、购买、或者出现问题需要告知用户时。提醒弹窗的不时出现会帮助用户对于当前动作提高注意力，设计者要确保每一个提醒都提供非常重要的信息以及有用的选择。

更多的实行细则，请查看  UIAlertController Class Reference 。

提醒标题和信息 Alert Title and Messages

提醒标题使用多词。单个词的标题，比如说“看”或者“租”，很少能够提供有用的信息。

使用一个描述性的提醒标题，就可以代替文字段描述。用户在屏幕上所读取到的文字内容越少越好。考虑使用问问题的方式或者使用两个短句子来作为你的提醒标题，以此来避免增加附加文字段信息。

如果你必须要提供附加文字段提醒信息，保持精简，使用完整的句子。理想话来讲，要确保信息足够短，只需要在1行或者2行内展示，避免滚动查看，使用大写和合适的标点符号。

提醒按钮 Alert Buttons

一般来说，使用含有两个按钮的提醒弹窗。提醒弹窗包含2个简单的选项。如果只有单个按钮，使得用户没有选择的余地；大于等于3个按钮就会增加操作的复杂性。提醒弹窗的按钮应该简洁明了，且标题具有逻辑性。按钮标题最好由1到2个描述结果的单词组成，以下是一些是在设计提醒弹窗按钮时的一些准则：

• 所有的按钮标题，应该大写且结尾没有标点符号
• 尽可能使用与提醒弹窗标题与附加文字信息相关的动词或者动词短语，比如说“查看全部”、“回复”、“忽略”
• 简单的接受操作使用ok。避免使用yes或no
• 按钮标题避免使用你、你的、我、我的这类人称代词，因为这些字眼看起来模棱两可，且有时候用户会认为带有侮辱性

提醒弹窗的取消标签要易操作。取消提醒弹窗的按钮标签，应该足够明显，比如使用取消或撤销的字眼。

如果提醒弹窗的某个按钮操作具有破坏性，其按钮样式应该具有高辨识度。一个不可逆操作的提醒按钮，比如删除，在样式设计上强化，使其与系统相一致。 更多的实行细则，请查看 UIAlertActionStyleDestructive 。

允许使用遥控器来取消提醒弹窗。按下遥控器上的菜单按钮可以产生与单击取消按钮一样的效果，也就是说，你按下遥控器上的菜单按钮也可以退出提醒。如果你的提醒弹窗没有一个取消按钮，可以考虑给你的菜单按钮添加退出提醒弹窗的代码。

 

 

 

原文地址：https://developer.apple.com/tvos/human-interface-guidelines/

译文地址：MUX

顶部图片来源：http://www.freetechnews.org/apple-has-slashed-the-apple-tvs-price/

===================================================================================================================

不知不觉UXRen社区官网已经一岁半了， 在这里小编要感谢那么一如既往支持本站的油茶人。

UXRen.cn欢迎油茶人投稿，提供有价值的资讯、线索、点子及建议。

邮箱：contact@13tech.com.cn

注明：本站内容及数据部分来自互联网及公开渠道，如有侵权请及时联系我们。 ===================================================================================================================